 <template>
<!--tab切换 begin-->
   <div style="padding: 10px 15px;" class="overflowY">
     <div style="padding: 0px 0px 0px 0px;margin: 0px 0px 0px 0px;">
       <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
         <el-tab-pane label="基本信息" name="first">
           <div style="border: 1px solid #e4e7ed;border-top: 0;">
             <base-card title="基本信息">
               <div style="padding-left: 20px;">
                 <el-form :inline="true" :model="ruleForm" label-position="left" class="demo-form-inline conponentForm" label-width="80px" size="small">
                   <el-row :gutter="20">
                     <el-col :sm="6" :xl="4">
                       <el-form-item label="日期 : ">
                         <div class="searchTime" style="width: 100%">
                           <el-date-picker
                             size="small"
                             v-model="ruleForm.input1"
                             type="date"
                             placeholder="选择日期">
                           </el-date-picker>
                         </div>
                       </el-form-item>
                     </el-col>
                     <el-col :sm="6" :xl="4">
                       <el-form-item label="项目编号 : ">
                         <el-input size="small" v-model="ruleForm.input2" placeholder="请输入项目编号"></el-input>
                       </el-form-item>
                     </el-col>
                     <el-col :sm="6" :xl="4">
                       <el-form-item label="项目名称 : ">
                         <el-input size="small" v-model="ruleForm.input3" placeholder="请输入项目名称"></el-input>
                       </el-form-item>
                     </el-col>
                     <el-col :sm="6" :xl="4">
                       <el-form-item label="开始日期 : ">
                         <div class="searchTime" style="width: 100%">
                           <el-date-picker
                             size="small"
                             v-model="ruleForm.input4"
                             type="date"
                             placeholder="选择日期">
                           </el-date-picker>
                         </div>
                       </el-form-item>
                     </el-col>
                     <el-col :sm="6" :xl="4">
                       <el-form-item label="结束日期 : ">
                         <div class="searchTime" style="width: 100%">
                           <el-date-picker
                             size="small"
                             v-model="ruleForm.input5"
                             type="date"
                             placeholder="选择日期">
                           </el-date-picker>
                         </div>
                       </el-form-item>
                     </el-col>
                     <el-col :sm="6" :xl="4">
                       <el-form-item label="所属区域 : ">
                         <el-input size="small" v-model="ruleForm.input6" placeholder="请输入所属区域"></el-input>
                       </el-form-item>
                     </el-col>
                     <el-col :sm="6" :xl="4">
                       <el-form-item label="项目状态 : ">
                         <el-select v-model="ruleForm.input7" placeholder="请选择" size="small">
                           <el-option
                             v-for="item in options"
                             :key="item.value"
                             :label="item.label"
                             :value="item.value">
                           </el-option>
                         </el-select>
                       </el-form-item>
                     </el-col>
                     <el-col :sm="6" :xl="4">
                       <el-form-item label="跟踪人 : ">
                         <el-input size="small" v-model="ruleForm.input8" placeholder="请选择" suffix-icon="el-icon-search"></el-input>
                       </el-form-item>
                     </el-col>
                   </el-row>
                 </el-form>
               </div>
             </base-card>
             <base-card title="建设单位">
               <div style="padding-left: 20px;">
                 <el-form :inline="true" :model="ruleForm" label-position="left" class="demo-form-inline conponentForm" label-width="90px" size="small">
                   <el-row :gutter="20">
                     <el-col :sm="6" :xl="4">
                       <el-form-item label="建设单位 : " prop="">
                         <el-input size="small" v-model="ruleForm.input2" placeholder="请输入建设单位"></el-input>
                       </el-form-item>
                     </el-col>
                     <el-col :sm="6" :xl="4">
                       <el-form-item label="联系人 : ">
                         <el-input size="small" v-model="ruleForm.input3" placeholder="请输入联系人"></el-input>
                       </el-form-item>
                     </el-col>
                   </el-row>
                 </el-form>
               </div>
             </base-card>
             <base-card title="立项人基本资料">
               <div style="padding-left: 20px;">
                 <el-form :inline="true" :model="ruleForm" label-position="left" class="demo-form-inline conponentForm" label-width="80px" size="small">
                   <el-row :gutter="20">
                     <el-col :sm="6" :xl="4">
                       <el-form-item label="日期 : ">
                         <div class="searchTime" style="width: 100%">
                           <el-date-picker
                             size="small"
                             v-model="ruleForm.input1"
                             type="date"
                             placeholder="选择日期">
                           </el-date-picker>
                         </div>
                       </el-form-item>
                     </el-col>
                     <el-col :sm="6" :xl="4">
                       <el-form-item label="项目编号 : ">
                         <el-input size="small" v-model="ruleForm.input2" placeholder="请输入项目编号"></el-input>
                       </el-form-item>
                     </el-col>
                     <el-col :sm="6" :xl="4">
                       <el-form-item label="项目名称 : ">
                         <el-input size="small" v-model="ruleForm.input3" placeholder="请输入项目名称"></el-input>
                       </el-form-item>
                     </el-col>
                     <el-col :sm="6" :xl="4">
                       <el-form-item label="开始日期 : ">
                         <div class="searchTime" style="width: 100%">
                           <el-date-picker
                             size="small"
                             v-model="ruleForm.input4"
                             type="date"
                             placeholder="选择日期">
                           </el-date-picker>
                         </div>
                       </el-form-item>
                     </el-col>
                     <el-col :sm="6" :xl="4">
                       <el-form-item label="结束日期 : ">
                         <div class="searchTime" style="width: 100%">
                           <el-date-picker
                             size="small"
                             v-model="ruleForm.input5"
                             type="date"
                             placeholder="选择日期">
                           </el-date-picker>
                         </div>
                       </el-form-item>
                     </el-col>
                     <el-col :sm="6" :xl="4">
                       <el-form-item label="所属区域 : ">
                         <el-input size="small" v-model="ruleForm.input6" placeholder="请输入所属区域"></el-input>
                       </el-form-item>
                     </el-col>
                     <el-col :sm="6" :xl="4">
                       <el-form-item label="项目状态 : ">
                         <el-select v-model="ruleForm.input7" placeholder="请选择" size="small">
                           <el-option
                             v-for="item in options"
                             :key="item.value"
                             :label="item.label"
                             :value="item.value">
                           </el-option>
                         </el-select>
                       </el-form-item>
                     </el-col>
                     <el-col :sm="6" :xl="4">
                       <el-form-item label="跟踪人 : ">
                         <el-input size="small" v-model="ruleForm.input8" placeholder="请选择" suffix-icon="el-icon-search"></el-input>
                       </el-form-item>
                     </el-col>
                   </el-row>
                 </el-form>
               </div>
             </base-card>
           </div>
         </el-tab-pane>
         <el-tab-pane label="项目施工清单" name="second">
           <div style="border: 1px solid #e4e7ed;border-top: 0;">
             项目施工清单
           </div>
         </el-tab-pane>
         <el-tab-pane label="项目成员" name="third">
           <div style="border: 1px solid #e4e7ed;border-top: 0;">
             项目成员
           </div>
         </el-tab-pane>
       </el-tabs>
     </div>
     <base-card title="说明">
       <code style="margin-top: 15px;">
         <span style="width: 100%;display: inline-block;">1、el-tab-pane即为每一个tab页，把需要的内容添加到里面，lable值对应选项卡标题，name与选项卡activeName对应的标识符，表示选项卡别名</span>
         <span style="width: 100%;display: inline-block;">2、在return里面定义变量activeName 来设置默认显示第几个选项卡</span>
         <span style="width: 100%;display: inline-block;">3、最外层 div 上的margin、padding控制div的外边距和内边距，四个值分别为上、右、下、左</span>
       </code>
     </base-card>
     <base-card title="HTML">
       <pre><code><p>     &lt;div style="padding: 0px 0px 0px 0px;margin: 0px 0px 0px 0px;"&gt;<br>       &lt;el-tabs v-model="activeName" type="card" @tab-click="handleClick"&gt;<br>         &lt;el-tab-pane label="基本信息" name="first"&gt;<br>           &lt;div style="border: 1px solid #e4e7ed;border-top: 0;"&gt;<br>             &lt;base-card title="基本信息"&gt;<br>               &lt;div style="padding-left: 20px;"&gt;<br>                 &lt;el-form :inline="true" :model="ruleForm" label-position="left" class="demo-form-inline conponentForm" label-width="80px" size="small"&gt;<br>                   &lt;el-row :gutter="20"&gt;<br>                     &lt;el-col :sm="6" :xl="4"&gt;<br>                       &lt;el-form-item label="日期 : "&gt;<br>                         &lt;div class="searchTime" style="width: 100%"&gt;<br>                           &lt;el-date-picker<br>                             size="small"<br>                             v-model="ruleForm.input1"<br>                             type="date"<br>                             placeholder="选择日期"&gt;<br>                           &lt;/el-date-picker&gt;<br>                         &lt;/div&gt;<br>                       &lt;/el-form-item&gt;<br>                     &lt;/el-col&gt;<br>                     &lt;el-col :sm="6" :xl="4"&gt;<br>                       &lt;el-form-item label="项目编号 : "&gt;<br>                         &lt;el-input size="small" v-model="ruleForm.input2" placeholder="请输入项目编号"&gt;&lt;/el-input&gt;<br>                       &lt;/el-form-item&gt;<br>                     &lt;/el-col&gt;<br>                     &lt;el-col :sm="6" :xl="4"&gt;<br>                       &lt;el-form-item label="项目名称 : "&gt;<br>                         &lt;el-input size="small" v-model="ruleForm.input3" placeholder="请输入项目名称"&gt;&lt;/el-input&gt;<br>                       &lt;/el-form-item&gt;<br>                     &lt;/el-col&gt;<br>                     &lt;el-col :sm="6" :xl="4"&gt;<br>                       &lt;el-form-item label="开始日期 : "&gt;<br>                         &lt;div class="searchTime" style="width: 100%"&gt;<br>                           &lt;el-date-picker<br>                             size="small"<br>                             v-model="ruleForm.input4"<br>                             type="date"<br>                             placeholder="选择日期"&gt;<br>                           &lt;/el-date-picker&gt;<br>                         &lt;/div&gt;<br>                       &lt;/el-form-item&gt;<br>                     &lt;/el-col&gt;<br>                     &lt;el-col :sm="6" :xl="4"&gt;<br>                       &lt;el-form-item label="结束日期 : "&gt;<br>                         &lt;div class="searchTime" style="width: 100%"&gt;<br>                           &lt;el-date-picker<br>                             size="small"<br>                             v-model="ruleForm.input5"<br>                             type="date"<br>                             placeholder="选择日期"&gt;<br>                           &lt;/el-date-picker&gt;<br>                         &lt;/div&gt;<br>                       &lt;/el-form-item&gt;<br>                     &lt;/el-col&gt;<br>                     &lt;el-col :sm="6" :xl="4"&gt;<br>                       &lt;el-form-item label="所属区域 : "&gt;<br>                         &lt;el-input size="small" v-model="ruleForm.input6" placeholder="请输入所属区域"&gt;&lt;/el-input&gt;<br>                       &lt;/el-form-item&gt;<br>                     &lt;/el-col&gt;<br>                     &lt;el-col :sm="6" :xl="4"&gt;<br>                       &lt;el-form-item label="项目状态 : "&gt;<br>                         &lt;el-select v-model="ruleForm.input7" placeholder="请选择" size="small"&gt;<br>                           &lt;el-option<br>                             v-for="item in options"<br>                             :key="item.value"<br>                             :label="item.label"<br>                             :value="item.value"&gt;<br>                           &lt;/el-option&gt;<br>                         &lt;/el-select&gt;<br>                       &lt;/el-form-item&gt;<br>                     &lt;/el-col&gt;<br>                     &lt;el-col :sm="6" :xl="4"&gt;<br>                       &lt;el-form-item label="跟踪人 : "&gt;<br>                         &lt;el-input size="small" v-model="ruleForm.input8" placeholder="请选择" suffix-icon="el-icon-search"&gt;&lt;/el-input&gt;<br>                       &lt;/el-form-item&gt;<br>                     &lt;/el-col&gt;<br>                   &lt;/el-row&gt;<br>                 &lt;/el-form&gt;<br>               &lt;/div&gt;<br>             &lt;/base-card&gt;<br>             &lt;base-card title="建设单位"&gt;<br>               &lt;div style="padding-left: 20px;"&gt;<br>                 &lt;el-form :inline="true" :model="ruleForm" label-position="left" class="demo-form-inline conponentForm" label-width="90px" size="small"&gt;<br>                   &lt;el-row :gutter="20"&gt;<br>                     &lt;el-col :sm="6" :xl="4"&gt;<br>                       &lt;el-form-item label="建设单位 : " prop=""&gt;<br>                         &lt;el-input size="small" v-model="ruleForm.input2" placeholder="请输入建设单位"&gt;&lt;/el-input&gt;<br>                       &lt;/el-form-item&gt;<br>                     &lt;/el-col&gt;<br>                     &lt;el-col :sm="6" :xl="4"&gt;<br>                       &lt;el-form-item label="联系人 : "&gt;<br>                         &lt;el-input size="small" v-model="ruleForm.input3" placeholder="请输入联系人"&gt;&lt;/el-input&gt;<br>                       &lt;/el-form-item&gt;<br>                     &lt;/el-col&gt;<br>                   &lt;/el-row&gt;<br>                 &lt;/el-form&gt;<br>               &lt;/div&gt;<br>             &lt;/base-card&gt;<br>             &lt;base-card title="立项人基本资料"&gt;<br>               &lt;div style="padding-left: 20px;"&gt;<br>                 &lt;el-form :inline="true" :model="ruleForm" label-position="left" class="demo-form-inline conponentForm" label-width="80px" size="small"&gt;<br>                   &lt;el-row :gutter="20"&gt;<br>                     &lt;el-col :sm="6" :xl="4"&gt;<br>                       &lt;el-form-item label="日期 : "&gt;<br>                         &lt;div class="searchTime" style="width: 100%"&gt;<br>                           &lt;el-date-picker<br>                             size="small"<br>                             v-model="ruleForm.input1"<br>                             type="date"<br>                             placeholder="选择日期"&gt;<br>                           &lt;/el-date-picker&gt;<br>                         &lt;/div&gt;<br>                       &lt;/el-form-item&gt;<br>                     &lt;/el-col&gt;<br>                     &lt;el-col :sm="6" :xl="4"&gt;<br>                       &lt;el-form-item label="项目编号 : "&gt;<br>                         &lt;el-input size="small" v-model="ruleForm.input2" placeholder="请输入项目编号"&gt;&lt;/el-input&gt;<br>                       &lt;/el-form-item&gt;<br>                     &lt;/el-col&gt;<br>                     &lt;el-col :sm="6" :xl="4"&gt;<br>                       &lt;el-form-item label="项目名称 : "&gt;<br>                         &lt;el-input size="small" v-model="ruleForm.input3" placeholder="请输入项目名称"&gt;&lt;/el-input&gt;<br>                       &lt;/el-form-item&gt;<br>                     &lt;/el-col&gt;<br>                     &lt;el-col :sm="6" :xl="4"&gt;<br>                       &lt;el-form-item label="开始日期 : "&gt;<br>                         &lt;div class="searchTime" style="width: 100%"&gt;<br>                           &lt;el-date-picker<br>                             size="small"<br>                             v-model="ruleForm.input4"<br>                             type="date"<br>                             placeholder="选择日期"&gt;<br>                           &lt;/el-date-picker&gt;<br>                         &lt;/div&gt;<br>                       &lt;/el-form-item&gt;<br>                     &lt;/el-col&gt;<br>                     &lt;el-col :sm="6" :xl="4"&gt;<br>                       &lt;el-form-item label="结束日期 : "&gt;<br>                         &lt;div class="searchTime" style="width: 100%"&gt;<br>                           &lt;el-date-picker<br>                             size="small"<br>                             v-model="ruleForm.input5"<br>                             type="date"<br>                             placeholder="选择日期"&gt;<br>                           &lt;/el-date-picker&gt;<br>                         &lt;/div&gt;<br>                       &lt;/el-form-item&gt;<br>                     &lt;/el-col&gt;<br>                     &lt;el-col :sm="6" :xl="4"&gt;<br>                       &lt;el-form-item label="所属区域 : "&gt;<br>                         &lt;el-input size="small" v-model="ruleForm.input6" placeholder="请输入所属区域"&gt;&lt;/el-input&gt;<br>                       &lt;/el-form-item&gt;<br>                     &lt;/el-col&gt;<br>                     &lt;el-col :sm="6" :xl="4"&gt;<br>                       &lt;el-form-item label="项目状态 : "&gt;<br>                         &lt;el-select v-model="ruleForm.input7" placeholder="请选择" size="small"&gt;<br>                           &lt;el-option<br>                             v-for="item in options"<br>                             :key="item.value"<br>                             :label="item.label"<br>                             :value="item.value"&gt;<br>                           &lt;/el-option&gt;<br>                         &lt;/el-select&gt;<br>                       &lt;/el-form-item&gt;<br>                     &lt;/el-col&gt;<br>                     &lt;el-col :sm="6" :xl="4"&gt;<br>                       &lt;el-form-item label="跟踪人 : "&gt;<br>                         &lt;el-input size="small" v-model="ruleForm.input8" placeholder="请选择" suffix-icon="el-icon-search"&gt;&lt;/el-input&gt;<br>                       &lt;/el-form-item&gt;<br>                     &lt;/el-col&gt;<br>                   &lt;/el-row&gt;<br>                 &lt;/el-form&gt;<br>               &lt;/div&gt;<br>             &lt;/base-card&gt;<br>           &lt;/div&gt;<br>         &lt;/el-tab-pane&gt;<br>         &lt;el-tab-pane label="项目施工清单" name="second"&gt;<br>           &lt;div style="border: 1px solid #e4e7ed;border-top: 0;"&gt;<br>             项目施工清单<br>           &lt;/div&gt;<br>         &lt;/el-tab-pane&gt;<br>         &lt;el-tab-pane label="项目成员" name="third"&gt;<br>           &lt;div style="border: 1px solid #e4e7ed;border-top: 0;"&gt;<br>             项目成员<br>           &lt;/div&gt;<br>         &lt;/el-tab-pane&gt;<br>       &lt;/el-tabs&gt;<br>     &lt;/div&gt;</p></code></pre>
     </base-card>
     <base-card title="JS">
       <pre><code>export default {<br>  data() {<br>    return {<br>      activeName: 'first',<br>      options: [{<br>        value: '0',<br>        label: '开始'<br>      }, {<br>        value: '1',<br>        label: '未开始'<br>      }],<br>      ruleForm: {<br>        input1: '',<br>        input2: '',<br>        input3: '',<br>        input4: '',<br>        input5: '',<br>        input6: '',<br>        input7: '',<br>        input8: ''<br>      }<br>    }<br>  },<br>  components: {<br>    BaseCard<br>  },<br>  methods: {<br>    handleClick(tab, event) {<br>      console.log(tab, event)<br>    }<br>  }<br>}</code></pre>
     </base-card>
     <base-card title="CSS">
       <pre><code>&lt;style scoped&gt;<br>   .searchTime &gt; div{<br>     width: 100%;<br>   }<br>   .conponentForm &gt;&gt;&gt; .el-form-item__content{<br>     width: calc(100% - 90px);<br>   }<br> &lt;/style&gt;</code></pre>
     </base-card>
   </div>
<!--tab切换 end-->
</template>

<script>
import BaseCard from '@/components/BaseCard/BaseCard'
export default {
  data() {
    return {
      activeName: 'first',
      options: [{
        value: '0',
        label: '开始'
      }, {
        value: '1',
        label: '未开始'
      }],
      ruleForm: {
        input1: '',
        input2: '',
        input3: '',
        input4: '',
        input5: '',
        input6: '',
        input7: '',
        input8: ''
      }
    }
  },
  components: {
    BaseCard
  },
  methods: {
    handleClick(tab, event) {
    }
  }
}
</script>
 <style scoped>
   .searchTime > div{
     width: 100%;
   }
   .conponentForm >>> .el-form-item__content{
     width: calc(100% - 90px);
   }
 </style>

